<template>
  <nav class="menu-container">
    <router-link  :to="{ name: item.name }" :exact="item.exacr" v-for="item in items" :key="item.link">
      <div class="icon">
        <Icon :type="item.icon"/>
      </div>
      <span>{{item.title}}</span>
    </router-link>
  </nav>
</template>

<script>
import Icon from "@/components/Iconfont"
export default {
  components: {
    Icon,
  },
  data() {
    return {
      items: [
        {
          name: 'Home',
          title: '首页',
          icon: "home",
          exacr: true,
        },
        {
          name: 'Blog',
          title: '文章',
          icon: "blog",
          exacr: false, // 激活状态是否要精确匹配
        },
        {
          name: 'About',
          title: '关于我',
          icon: "about",
          exacr: true,
        },
        {
          name: 'Project',
          title: '项目&效果',
          icon: "code",
          exacr: true,
        },
        {
          name: 'Message',
          title: '留言板',
          icon: "chat",
          exacr: true,
        },
      ]
    }
  },
}
</script>

<style lang="less" scoped>
@import "~@/styles/var.less";
  .menu-container {
    color: @gray;
    margin: 24px 0;
    a {
      padding: 0 50px;
      display: block;
      display: flex;
      align-items: center;
      height: 45px;
      .icon {
        width: 30px;
        .iconfont{
          font-size: 20px;
        }
      }
      &:hover{
        color: #fff;
      }
      &.router-link-active {
        background: darken(@words, 3%);
      }
    }
  }
</style>